<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
	<meta charset="utf-8">
	<title>最简单的SVG具名元素</title>
	<script src="../static/js/echarts.js"></script>
	<!-- <script src="../static/js/echarts.min.js"></script> -->
</head>
<body style="height: 100%; margin: 0">
	<div id="container" style="height: 100%"></div>
</body>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
	renderer: 'canvas',
	useDirtyRect: false
});
var option;

var svg = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" fill-rule="evenodd" xml:space="preserve">
    <path name="named_rect" d="M 0,0 L 0,100 100,100 100,0 Z" fill="#ff0000" />
    <path d="M 150,0 L 150,100 250,100 250,0 Z" fill="#00aa00" />
</svg>
`;

echarts.registerMap('simple_svg', { svg: svg });
option = {
	geo: {
		map: 'simple_svg',
		selectedMode: 'multiple',
	}
};
myChart.setOption(option);

myChart.on('geoselectchanged', function (params) {
	console.log(params);
});

// if (option && typeof option === 'object') {
// 	myChart.setOption(option);
// }
// window.addEventListener('resize', myChart.resize);
</script>
</html>